<template>
	<view>
		<view class="bgFff radius30 p20 flex mb20">
			<view class="top-img">
				<image :src="api_host + skuList[skuIndex].image" mode=""></image>
			</view>
			<view class="ml20 flex1 right-info flex-jus flex-start">
				<view class="c343 f28 bold">{{skuList[skuIndex].name}}</view>
				<view class="cyellow">
					<text class="f24">￥</text>
					<text class="f32 bold">{{skuList[skuIndex].price}}</text>
				</view>
			</view>
		</view>
		<view class="f28 bold c343">门锁锁型</view>
		<u-gap height="10"></u-gap>
		<view class="flex flex-wrap sku-box flex-start">
			<view class="item-box radius30 mb20 mr10 ml10" :class="skuIndex == index?'active':'bgFff'"
				v-for="(item,index) in skuList" :key="index" @click="skuClick(index)">
				<view>
					<image :src="api_host + item.image" mode=""></image>
				</view>
				<view class="p10">
					<view class="f26 mr10 textoverflow mb10" :class="skuIndex == index?'cfff':'c343'">{{item.name}}</view>
					<view :class="skuIndex == index?'cfff':'cyellow'">
						<text class="f24">￥</text>
						<text class="f32 bold">{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bgFff p20 radius30 flex-jus">
			<view class="flex" @click="maketel(config.phone)">
				<image src="../static/lock/kf.png" mode="" style="width:50rpx;height: 50rpx;"></image>
				<text class="f28 bold c343 ml10 italic-text">专属客服</text>
			</view>
			<view>
				<u-button color="#21B9AD" :customStyle="{'color':'#fff','height':'80rpx'}" shape="circle"
					@click="createOrder">立即预约</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {} from '@/common/api.js'
	export default {
		name: '',
		props: {
			skuList: {
				type: Array,
				default: []
			},
			curInfo: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				skuIndex: 0
			}
		},
		onLoad(option) {

		},
		created() {
			this.skuIndex = 0
		},
		methods: {
			skuClick(index){
				this.skuIndex = index
			},
			createOrder(){
				this.$emit('close')
				this.openUrl('/subpage/lock/sureorder?id='+this.curInfo.id+'&p_name='+this.curInfo.lockName+'&sku_id='+this.skuList[this.skuIndex].id)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}

	.ban-logo {
		position: absolute;
		top: 50%;
		left: 50rpx;
	}

	.sku-box {
		height: 700rpx;
		overflow-y: scroll;
	}

	.top-img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 30rpx;
		overflow: hidden;

		image {
			width: 140rpx;
			height: 140rpx;
		}
	}

	.right-info {
		height: 120rpx;
		flex-direction: column;
	}

	.item-box {
		width: 30%;

		image {
			width: 100%;
			height: 220rpx;
			border-radius: 30rpx 30rpx 30rpx 0;
		}
	}

	.active {
		background-color: #FF7F1C;
	}
</style>